import React from 'react'
import './App.css'
// import "./App1.less";
// import "./App2.scss";
// 图片
import url from '../public/1.jpg'
// 字体图标
import '../public/font_4724368_qpijgc1sxs/iconfont.css'
// 引入json文件
// import memberList from './test.json'
// 引入Demo1,Demo2组件(树摇清除未引用的js)
// import { Demo1, Demo2 } from './components/index'
// babel处理js非标准语法
// import { PureComponent } from 'react'
// 资源懒加载
// import React, { lazy, Suspense, useState } from 'react'
// // 使用import语法配合react的Lazy动态引入资源
// const LazyDemo = lazy(() => import('./components/LazyDemo'))

function App() {
  return (
    <>
      <h2>Hi jay</h2>
      {/* //图片 */}
      <img src={url} alt='' />
      {/* //字体图标 */}
      <i className='iconfont icon-bingqilin'></i>
    </>
  )
  // 打印json文件里的数组
  // return console.log('memberList', memberList)
  // 树摇清除未引用的js测试，man.js文件里只有Demo1被清除了
  // return console.log('Demo1', Demo1)
  // // 懒加载
  // const [show, setShow] = useState(false) // 点击事件中动态引入css, 设置show为true
  // const handleOnClick = () => {
  //   // import("./App.css");
  //   setShow(true)
  // }
  // return (
  //   <>
  //     <h2 onClick={handleOnClick}> 展示</h2>
  //     {/* show为true时加载LazyDemo组件 */}
  //     {show && (
  //       <Suspense fallback={null}>
  //         <LazyDemo />
  //       </Suspense>
  //     )}
  //   </>
  // )
}

// // babel处理js非标准语法
// // 装饰器为,组件添加name属性
// function addName(Target: Function) {
//   Target.prototype.name = '周杰伦'
// }
// // 使用装饰器
// @addName
// class Cls extends PureComponent {
//   name?: string

//   render() {
//     return <h2>我是帅哥---{this.name}</h2>
//   }
// }

export default App
